import Vue from 'vue';
import VueRouter  from 'vue-router';

Vue.use(VueRouter);
import store from './../store/index'

import App from './../components/App.vue' ;
import index from './../views/index';
import detailCompoent from  './../views/detail.vue' ;
import myCompoent from  './../views/my.vue' ;
import recommendedComponent from "./../views/recommended.vue";
import playCompoent from  './../views/play' ;
import editComponent from "./../views/edit";
import tabsComponent from "./../views/tab.demo";
import demoComponent from './../components/demo1' ;

const routes = [
    {
        path: '',
        redirect: '/home',
        component:App
    },
    {
        path: '/home',
        component: index
    },
    {
        path: '/detail/:name',
        component: detailCompoent,
    },
    {
        path: '/my',
        component: myCompoent,
    },
    {
        path: '/play/:id',
        component: playCompoent,
    },
    {
      path: '/edit',
      component: editComponent
    },
    {
      path:'/tabs/:name' ,
      component : tabsComponent
    },
    {
      path:'/recommended' ,
      component : recommendedComponent
    }
] ;

const router = new VueRouter({
  routes ,// （缩写）相当于 routes: routes
  scrollBehavior (to, from, savedPosition) {
      console.log(to.hash)
      if (to.hash) {
        return {
          selector: to.hash
        }
      }
    }
})
// router.beforeEach((to, from, next) => {
//   // beforeEnterMethod({
//   //   to:to,
//   //   from:from ,
//   //   next:next,
//   //   routerList:['/detail/music','/detail/radio','/detail/video']
//   // })
//   next()
// })
let beforeEnterMethod = (params) => {
  const {
  to ,
  from ,
  next ,
  routerList
  }  = params ;

  const toIndex = routerList.indexOf(to.path)    // 进入下标
  const fromIndex = routerList.indexOf(from.path)   // 离开下标
  let direction ; 

  if (toIndex > -1 && fromIndex > -1) {   // 如果下标都存在
    if (toIndex < fromIndex) {          // 如果进入的下标小于离开的下标，那么是左滑
      direction = 'left'
    } else {
      direction = 'right'         // 如果进入的下标大于离开的下标，那么是右滑
    }
  }
  store.state.common.viewDirection = direction  //这里使用vuex进行赋值
  return next()
}
export  default router
